<script lang='ts' setup>
import { NoteInfo, PurviewType } from '@/models/Note';
import { noteService } from '@/services/note.service';
import { ref, defineProps, onMounted, reactive } from 'vue';
const data = ref([] as NoteInfo[]);

const columns = ref([
  { colKey: 'remark', title: '内容' },
  { colKey: 'bgcolor', title: 'bgcolor' },
  { colKey: 'share', title: '分享数' },
  { colKey: 'purview', title: '权限' },
  { colKey: 'user', title: '作者' },
])
const isLoading = ref(false);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
  showJumper: true,
});
onMounted(() => { getList(); })

function getList(): void {
  isLoading.value = true;
  const { current, pageSize } = pagination;
  noteService.list(current, pageSize).then(res => {
    data.value = res.list;
    pagination.total = res.total;
    isLoading.value = false;
  })
}

// BaseTable 中只有 page-change 事件，没有 change 事件
const onPageChange = async (pageInfo) => {
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  getList();
};
</script>
<template>
  <div>
    <t-base-table row-key="uid" size="small" :loading="isLoading" :tableLayout="true" bordered stripe
      :pagination="pagination" :data="data" :columns="columns" @page-change="onPageChange">
      <template #purview="{ row }">
        <span>{{ row.purview === PurviewType.Public ? '公开' : '私密' }}</span>
      </template>
      <template #user="{ row }">
        <span>{{ row.user?.nick }}</span>
      </template>
    </t-base-table>
  </div>
</template>
<style lang='scss' scoped>
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
</style>